<template>
  <view class="container">
    <view class="container-body">
      <view class="container-body__content">
        <view class="container-body__content-info">
          <view class="container-body__content-info-label">
            <text>需缴费金额：</text>
          </view>
          <view class="container-body__content-info-item" style="justify-content: center;padding: 40rpx 0;">
            <view style="display: flex; align-items: center;font-size: 50rpx; color: #F9B523;">{{ totalCost }}<text style="font-size: 30rpx;">元</text></view>
          </view>
          <view class="container-body__content-info-label">
            <text>缴费单：</text>
          </view>
          <view class="container-body__content-info-item" style="width: 100%;">
            <!--   表格区域  -->
            <view class="container-body__content-info-item__table">
              <view class="container-body__content-info-item__table__header">
                <view class="container-body__content-info-item__table__header-item">
                  <text>维修项目</text>
                </view>
                <view class="container-body__content-info-item__table__header-item">
                  <text>材料费(元)</text>
                </view>
                <view class="container-body__content-info-item__table__header-item">
                  <text>劳务费</text>
                </view>
                <view class="container-body__content-info-item__table__header-item">
                  <text>数量</text>
                </view>
              </view>
              <view class="container-body__content-info-item__table__content" v-for="(item,index) in orderInfo.workOrderChargeItemList"
                    :key="index">
                <view class="container-body__content-info-item__table__content-item">
                  <text>{{ item.itemName }}</text>
                </view>
                <view class="container-body__content-info-item__table__content-item">
                  <text>{{ item.materialCost }}</text>
                </view>
                <view class="container-body__content-info-item__table__content-item">
                  <text>{{ item.laborCost }}</text>
                </view>
                <view class="container-body__content-info-item__table__content-item">
                  <text>{{ item.chargeQuantity }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="container-body__content-info__footer">
            <view class="container-body__content-info__footer-text">
              <text style="color: #F9B523; font-size: 30rpx;">合计: {{ totalCost }}元</text>
            </view>
            <view class="container-body__content-info__footer-text">
              <text>提交时间：{{orderInfo.workCompletedTime}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer__btn">
        <u-button type="primary" @click.stop="submit">已确认缴费单，去缴费</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {getWorkOrderDetail,unifiedPay} from "@/api/manager/workOrder";


export default {
  data() {
    return {
      // 工单ID
      workOrderId: '',
      // 工单详情
      orderInfo: {},
      chargeList: [
        {name: '水暖-管道疏通', material: 58, labor: 30, count: 1},
        {name: '电力-电源改造', material: 100, labor: 50, count: 1},
      ],
    };
  },
  computed: {
    //总计费用
    totalCost() {
      let total = 0
      if (this.orderInfo.workOrderChargeItemList && this.orderInfo.workOrderChargeItemList.length > 0) {
        this.orderInfo.workOrderChargeItemList.forEach(item => {
          total += (item.materialCost * item.chargeQuantity) + item.laborCost
        })
      }
      return total.toFixed(2)
    }
  },
  onLoad(options) {
    this.workOrderId = options.workOrderId
    this.init()
  },
  methods: {
    init() {
      // 获取工单详情
      this.getWorkOrderDetail();
    },
    // 获取工单详情
    getWorkOrderDetail() {
      if (!this.workOrderId) {
        return
      }
      getWorkOrderDetail(this.workOrderId).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data;
        }
      })
    },
    // 提交
    submit() {
      unifiedPay(this.workOrderId).then(res => {
        if (res.code === 200) {
          wx.requestPayment({
            timeStamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success: (e)=> {
              console.log("调起成功!")
              uni.showToast({
                title: '支付成功',
                icon: 'none',
              })
              setTimeout(() => {
                this.back()
              }, 1000)
            },
            fail: function (e) {
              console.log("失败: " + e);
            }
          })
        }
      })
    },
    // 返回
    back() {
      // 判断当前页面是否有上一页
      let pages = getCurrentPages()
      if (pages.length > 1) {
        // 页面栈中有上一页，则返回上一页
        this.$tab.navigateBack()
      } else {
        this.$tab.redirectTo('/pages/manager/workOrder/maintenance/list')
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  padding: 20px;

  .container-body {
    margin-bottom: 160rpx;

    &__content {
      margin-top: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      &-title {
        padding: 20rpx 0;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
        border-bottom: 1px solid #EBEBEB;
      }

      &-info {

        &-item {
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-label {
            font-size: 28rpx;
            color: #2B2B2B;
            width: 160rpx;
          }

          &-value {
            font-size: 28rpx;
            color: #2B2B2B;
            margin-left: 20rpx;
          }

          &__photo {
            display: flex;
            justify-content: space-between;
            flew-wrap: wrap;
            //margin-top: 10rpx;
            &-item {
              margin-right: 10rpx;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          &__left {
            display: flex;
            align-items: center;

            &-avatar {

            }

            &-name {
              margin-left: 20rpx;
              font-size: 30rpx;
              color: #2B2B2B;
            }
          }

          &__right {
            .phone-icon {
              border-radius: 50%;
              border: 1rpx solid #02A7F0;
              width: 60rpx;
              height: 60rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .container-body__content-info-item__table {
            flex: 1;

            &__header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              background-color: #F0F1F5;
              padding: 20rpx 0;
              border: 1rpx solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }

            &__content {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              border-bottom: 1px solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }
          }
        }

        .container-body__content-info__footer {
          &-text {
            font-size: 28rpx;
            text-align: right;
            margin-bottom: 20rpx;
          }
        }

        .tip-text {
          text-align: right;
          font-size: 28rpx;
          color: #AAAAAA;
        }
      }
    }
  }

  .container-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 30rpx 20rpx;
    display: flex;
    justify-content: space-between;

    &__btn {
      width: 100%;
      border-radius: 10rpx;
      border: 1rpx solid #ccc;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
